<template>
    <div class="jianzhan-content">
        <crumb :name="$t('woInvoice.invoice')"></crumb>
        <div class="search-content">
            <el-date-picker v-model="startTime"
                            type="date"
                            size="small"
                            value-format="yyyy-MM-dd"
                            :placeholder="$t('woInvoice.startTime')"></el-date-picker>
            -
            <el-date-picker v-model="endTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            size="small"
                            :placeholder="$t('woInvoice.endTime')"></el-date-picker>
            -
            <el-select v-model="customerName" :placeholder="$t('woInvoice.customer')" size="small">
                <el-option
                        v-for="item in customerList"
                        :key="item.text"
                        :label="item.text"
                        :value="item.text">
                </el-option>
            </el-select>
            <el-button type="primary" size="small" style="margin-left: 10px;" @click="getWoInvoiceList">
                {{$t('woInvoice.search')}}
            </el-button>
            <el-button type="primary" size="small" style="margin-left: 10px;" @click="downloadSum">汇总下载</el-button>
            <el-button type="primary" size="small" style="margin-left: 10px;" @click="downloadDetail">明细下载</el-button>
        </div>
        <div class="content">
            <div class="table-wrapper">
                <el-table
                        :data="workList"
                        stripe
                        row-key="id"
                        border
                        @filter-change="filterChange"
                        @expand-change="expandChange"
                        style="width: 100%">

                    <el-table-column
                            prop="invoiceNumber"
                            width="100px"
                            :label="$t('workingOrder.invoiceNumber')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="invoiceDate"
                            width="100px"
                            :label="$t('workingOrder.invoiceDate')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="startTime"
                            width="100px"
                            :label="$t('woInvoice.startTime')">
                    </el-table-column>
                    <el-table-column
                            prop="endTime"
                            width="100px"
                            :label="$t('woInvoice.endTime')">
                    </el-table-column>
                    <el-table-column
                            width="100px"
                            prop="exchangeRateForParts"
                            :label="$t('woInvoice.currency')">
                    </el-table-column>
                    <el-table-column
                            width="100px"
                            prop="exchangeRateForPointCode"
                            :label="$t('woInvoice.currency1')">
                    </el-table-column>
                    <el-table-column
                            column-key="customerName"
                            :filter-multiple="false"
                            :filters="customerList"
                            prop="customer"
                            width="180px"
                            :label="$t('woInvoice.customer')">
                    </el-table-column>
                    <el-table-column
                            prop="servicePrice"
                            width="150px"
                            :label="$t('woInvoice.servicePrice')">
                    </el-table-column>
                    <el-table-column
                            prop="partsPrice"
                            width="150px"
                            :label="$t('woInvoice.partPrice')">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            :label="$t('operate')"
                    >
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-edit" size="mini" @click="edit(scope.row)">
                                {{$t('detail')}}
                            </el-button>
                            <!--<el-button type="text" icon="el-icon-delete" size="mini" @click="deleteCheck(scope.row)">-->
                            <!--{{$t('delete')}}-->
                            <!--</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination
                            background
                            @current-change="changePage"
                            :page-size="pageSize"
                            layout="prev, pager, next"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog
                :visible.sync="dialogVisible"
                width="100%"
        >
            <el-table
                    :data="invoiceDetailList"
                    border
                    row-key="id"
                    @expand-change="expandChange"
                    stripe
                    style="width: 100%">
                <el-table-column type="expand" :label="$t('workingOrder.problem')" width="80">
                    <template slot-scope="scope">
                        <woDetailExpand :quest="scope.row"></woDetailExpand>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="workingNumber"
                        :label="$t('workingOrder.workingNumber')"
                ></el-table-column>
                <el-table-column
                        prop="partsPrice"
                        label="Part Price/配件价格"
                >
                </el-table-column>
                <el-table-column
                        prop="servicePrice"
                        label="Service Price/服务价格"
                >
                </el-table-column>


            </el-table>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import crumb from '../../components/common/crumb'
    import woDetailExpand from '../../components/service/woDetailExpand'
    import {
        deleteServiceInvoice,
        getSumInvoiceDetail,
        getSumInvoiceList,
        getWorkDetail
    } from "../../api/service";
    import {ERROR_OK} from "../../util/config";
    import {arrayUnique, baseURL} from "../../util";
    import mixins from '../../util/mixins'
    import {getCustomerList} from "../../api";

    export default {
        name: "wo-invoice",
        mixins:[mixins],
        data() {
            return {
                dialogVisible: false,
                startTime: '',
                endTime: '',
                customerName: '',
                customerList: [],
                workList: [],
                invoiceDetailList: [],
            }
        },
        created() {
            this.getWoInvoiceList();
            this._getCustomerList()
        },
        methods: {
            edit(row) {
                this.getDetail(row.id)
            },
            changePage(page){
                this.pageNum = page;
                this.getWoInvoiceList();

            },
            async getDetail(id) {
                const {status, data, msg} = await getSumInvoiceDetail(id);
                if (status === ERROR_OK) {
                    this.dialogVisible = true;
                    this.invoiceDetailList = data;
                } else {
                    this.$message.error(msg)
                }

            },
            deleteCheck(row) {
                this.$confirm(this.$t('shouldDelete'), this.$t('delete') + '?', {
                    confirmButtonText: this.$t('confirm'),
                    cancelButtonText: this.$t('cancel')
                }).then(async () => {
                    const {status} = await deleteServiceInvoice(row.id);
                    if (status === ERROR_OK) {
                        this.workList.splice(this.workList.findIndex(item => item.id === row.id), 1);
                        this.$message.success(this.$t('deleteSuccess'))
                    }
                }).catch(() => {
                    this.$message.info(this.$t('operateCancel'));
                })
            },
            downloadDetail() {
                const {startTime, endTime, customerName} = this;
                window.open(baseURL + `/manage/working_order/excel_detail_close_order.file?startTime=${startTime}&endTime=${endTime}&customerName=${customerName}`)
            },
            downloadSum() {
                const {startTime, endTime, customerName} = this;
                window.open(baseURL + `/manage/working_order/excel_summary_close_order.file?startTime=${startTime}&endTime=${endTime}&customerName=${customerName}`)
            },
            async expandChange(row) {
                if (row.partList) {
                    return
                }
                const {status, data} = await getWorkDetail(row.workOrderId);
                if (status === ERROR_OK) {
                    this.$set(row, 'jobInformationVoList', data.jobInformationVoList);
                    this.$set(row, 'suggestionVoList', data.suggestionVoList);
                    this.$set(row, 'causeOfProblem', data.causeOfProblem);
                    this.$set(row, 'workingPlaceDesc', data.workingPlaceDesc);
                    this.$set(row, 'problemVoList', data.problemVoList);
                    if (data.partsList) {
                        const partList = data.partsList.map(part => {
                            return {
                                ...part,
                                number: part.quantity,
                                salesPrice: part.priceFactor * (part.temPriceCHN * row.exchangeRateForParts || part.temPriceIDR),
                                quantity: part.sparePartsStock,
                            }
                        });
                        this.$set(row, 'partList', partList)
                    }
                    if (data.serviceChargeList) {
                        const serviceChargeList = data.serviceChargeList.map(item => {
                            return {
                                ...item,
                                price: item.hours * row.exchangeRateForPointCode
                            }
                        });
                        this.$set(row, 'serviceChargeList', serviceChargeList)
                    }
                }
            },
            filterChange(filters){
                Object.keys(filters).forEach(item => {
                    this[item] = filters[item][0]
                });
                this.getWoInvoiceList()
            },
            // filterHandler(value, row, column) {
            //     const property = column['property'];
            //     return row[property] === value;
            // },
            async _getCustomerList() {
                const {status, data} = await getCustomerList(3);
                if (status === ERROR_OK) {
                    this.customerList = data.map(item=>{
                        return {
                            text:item.customerName,
                            value:item.customerName
                        }
                    })
                }
            },
            async getWoInvoiceList() {
                const {startTime, endTime,customerName} = this;
                const {status, data,msg} = await getSumInvoiceList({
                    startTime,
                    endTime,
                    customer:customerName,
                    pageNum:this.pageNum
                });
                if (status === ERROR_OK) {
                    this.workList = data.list;
                } else {
                    this.$message.error(msg);
                    this.workList = []
                }
            }
        },
        components: {
            crumb, woDetailExpand
        }
    }
</script>

<style scoped lang="scss">
    .search-content {
        margin: 10px;
        text-align: left;
    }
</style>